<html>
  <head>
    <title>Plus: very basic sample</title>
    <style>
      @import url(../plus-routes.css); /* the only thing needed to include Plus framework */
      @import url(../../note.css); 
      
      toolbar > button { 
        behavior:radio;
        height:*; 
        width:64dip; 
        height:48dip; 
        text-align:center;
        vertical-align:middle;
      }
      toolbar > caption { 
        width:*; 
        text-align:center;
        vertical-align:middle;
      }
      
      
    </style>
    
    <script type="text/tiscript">
     
      function self.ready() {
        Plus.app.routes = [
          { path:"/first", url:"routes/first.htm" },
          { path:"/second", url:"routes/second.htm" },
          { path:"/third", url:"routes/third.htm" }
        ]; 
      }
      
      self << event routechange (evt) {
        var button = $(toolbar>button[href="{Plus.app.path}"]); 
        button.value = true;
      }

      self << event keyup (evt) {
        if( evt.keyCode == Event.VK_F5 ) {
          if( self.parent ) // loaded in frame
            self.parent.load(__FILE__);
          else // loaded in view ...
            view.load(__FILE__);
          return true;
        }
      }
      
    </script>
  </head>

<body> <!-- no data model in this sample -->
  <toolbar>
    <button(route) href="/first" checked>First</button> 
    <button(route) href="/second">Second</button> 
    <button(route) href="/third">Third</button> 
    <caption>Routes and views on Plus</caption>
  </toolbar>
  <main></main>
</body>
</html>
